<template>
  <div
    :class="{
      site_head: true,
      site_head_absolute: headIsAbsolute,
      site_head_fixed: !headIsAbsolute
    }"
  >
    <div class="head_inner">
      <h1 class="head_logo">
        <router-link to="/" class="logo_link"></router-link>
      </h1>
      <div class="site_channel" v-if="!headIsAbsolute">
        <router-link class="channel_nav channel_nav_default" to="/"
          >精选</router-link
        >
        <div class="site_channel_nav">
          <router-link
            class="channel_nav"
            to="/"
            v-for="item in showVideoChannels"
            :key="item.id"
            >{{ item.name }}</router-link
          >
        </div>
        <router-link class="channel_nav channel_nav_default" to="/"
          >全部</router-link
        >
      </div>
      <el-input class="search_input" v-model="searchKey">
        <el-button slot="append" icon="el-icon-search">全网搜</el-button>
      </el-input>
      <div class="mod_quick">
        <span
          to="/"
          id="mod_quick_history"
          class="mod_quick_history"
          @mouseover="showHistoryDropdown = true"
          @mouseout="showHistoryDropdown = false"
        >
          <!-- <svg-icon icon-class="history" /> -->
        </span>
        <div class="demo-basic--circle" style="float: right">
          <div class="block">
            <el-avatar icon="el-icon-user-solid"></el-avatar>
          </div>
        </div>
      </div>
    </div>
    <!-- <history-dropdown
      :isShow="showHistoryDropdown"
      idName="mod_quick_history"
      :screenWidth="screenWidth"
    /> -->
  </div>
</template>

<script>
import { getCategoryList } from "@/api/category";
// import HistoryDropdown from "./HistoryDropdown";
export default {
  name: "SiteHead",
  props: {
    isListenerScroll: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      headIsAbsolute: this.isListenerScroll,
      searchKey: "",
      showVideoChannels: [],
      videoChannels: [],
      screenWidth: document.body.clientWidth,
      avatarSize: 50,
      showHistoryDropdown: false
    };
  },
  components: {
    // HistoryDropdown
  },
  watch: {
    screenWidth: function() {
      this.initShowVideoChannels();
    }
  },
  mounted() {
    //可以在这里面直接进行滚动条的获取
    window.addEventListener("scroll", this.ScollPostion, true);
    //监听浏览器窗口大小变化
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
    this.getChannels("0");
  },
  methods: {
    initShowVideoChannels() {
      this.showVideoChannels = this.videoChannels.slice(0, 10);
      if (this.screenWidth <= 991) {
        this.showVideoChannels = this.videoChannels.slice(0, 4);
        this.avatarSize = 35;
      }
    },
    getChannels(parentId) {
      getCategoryList({ parentId: parentId }).then(v => {
        this.videoChannels = v.data;
        this.initShowVideoChannels();
      });
    },
    ScollPostion() {
      //滚动条位置
      if (this.isListenerScroll === true) {
        var t;
        if (document.documentElement && document.documentElement.scrollTop) {
          t = document.documentElement.scrollTop;
        } else if (document.body) {
          t = document.body.scrollTop;
        }
        if (t > 200) {
          this.headIsAbsolute = false;
        } else {
          this.headIsAbsolute = true;
        }
      }
    }
  }
};
</script>

<style lang="scss">
// @media (min-width: 980px) {
  .site_head_absolute {
    .mod_quick {
      [class^="mod_quick"] {
        color: rgba(255, 255, 255, 0.8);
      }
    }
    .head_logo {
      margin: 10px 0px 2px 20px;
    }
    .logo_link {
      background: url("../../image/sprite_head_logo.svg") 0 10px no-repeat;
      background-size: 120px;
    }
    .search_input {
      margin-left: 30%;
    }
  }
  .site_head_fixed {
    .head_logo {
      margin: 11px 0px 2px 20px;
    }
    .search_input {
      margin-left: 20px;
    }
    .logo_link {
      background: url("../../image/sprite_head_logo.svg") 0 -26px no-repeat;
      background-size: 120px;
    }
  }
  .site_head {
    min-width: 1000px;
    width: 100%;
    .head_inner {
      width: 90%;
      height: 65px;
      margin: 0 auto;
      .site_channel {
        margin: 14px 0 0 10px;
        line-height: 26px;
        .site_channel_nav {
          float: left;
        }
        .channel_nav_default {
          display: block;
          float: left;
        }
        .channel_nav {
          margin-right: 20px;
          font-size: 15px;
        }
      }
      .mod_quick {
        position: absolute;
        top: 15px;
        right: 40px;

        [class^="mod_quick"] {
          font-size: 40px;
          display: block;
          float: left;
          margin: -6px 100px 0px 0px;
        }
      }
      .search_input {
        position: relative;
        float: left;
        margin-top: 15px;
        border-radius: 20px;
        width: 25%;
        min-width: 300px;
      }
      .el-input__inner {
        height: 35px;
        border-radius: 20px 0px 0px 20px;
      }
      .el-input-group__append {
        width: 82px;
        font-size: 15px;
        height: 35px;
        border-radius: 0px 20px 20px 0px;
        padding: 0px 10px 0px 5px;
      }
    }
    .head_logo {
      width: 105px;
      .logo_link {
        height: 36px;
      }
    }
  }
// }

// @media (max-width: 991px) {
//   .site_head_absolute {
//     .mod_quick {
//       [class^="mod_quick"] {
//         color: rgba(255, 255, 255, 0.8);
//       }
//     }
//     .head_logo {
//       margin: 2px 0px 2px 20px;
//     }
//     .logo_link {
//       background: url("../../image/sprite_head_logo.svg") 0 10px no-repeat;
//       background-size: 120px;
//     }
//     .search_input {
//       margin-left: 150px;
//     }
//   }
//   .site_head_fixed {
//     .head_logo {
//       margin: 11px 0px 2px 20px;
//     }
//     .search_input {
//       margin-left: 20px;
//     }
//     .logo_link {
//       background: url("../../image/sprite_head_logo.svg") 0 -26px no-repeat;
//       background-size: 120px;
//     }
//   }
//   .site_head {
//     min-width: 768px;
//     font-size: 12px;
//     width: 100%;
//     .head_inner {
//       width: 100%;
//       height: 50px;
//       min-width: 768px;

//       .site_channel {
//         margin: 14px 0 0 10px;
//         line-height: 26px;
//         .site_channel_nav {
//           float: left;
//         }
//         .channel_nav_default {
//           display: block;
//           float: left;
//         }
//         .channel_nav {
//           margin-right: 8px;
//           font-size: 1px;
//         }
//       }
//       .mod_quick {
//         position: relative;
//         float: right;
//         margin-top: 10px;
//         margin-right: 20px;

//         [class^="mod_quick"] {
//           font-size: 30px;
//           padding: 5px;
//         }
//       }
//       .search_input {
//         // position: absolute;
//         // top: 12px;
//         // right: 270px;
//         position: relative;
//         float: left;
//         margin-top: 12px;
//         width: 228px;
//         border-radius: 20px;

//         .el-input__inner {
//           height: 27px;
//         }
//         .el-input {
//           input {
//             border-radius: 20px 0px 0px 20px;
//           }
//         }
//         .el-input-group__append {
//           width: 50px;
//           font-size: 10px;
//           border-radius: 0px 20px 20px 0px;
//           padding: 0px 10px 0px 5px;
//         }
//       }
//     }
//     .head_logo {
//       width: 105px;
//       .logo_link {
//         height: 36px;
//       }
//     }
//   }
// }

// @media (min-width: 1200px) {0
//   .site_head_absolute {
//     .logo_link {
//       background: url("../../image/sprite_head_logo.svg") 0 0px no-repeat;
//     }
//     .search_input {
//       margin-left: -215px;
//     }
//   }
//   .site_head_fixed {
//     .logo_link {
//       background: url("../../image/sprite_head_logo.svg") 0 -36px no-repeat;
//     }
//   }
//   .site_head {
//     min-width: 768px;
//     font-size: 12px;
//     width: 100%;
//     .head_inner {
//       height: 68px;
//       min-width: 768px;

//       .site_channel {
//         margin: 22px 0 0 30px;
//         line-height: 26px;

//         .channel_nav {
//           margin-right: 20px;
//           font-size: 15px;
//         }
//       }
//       .search_input {
//         position: absolute;
//         top: 14px;
//         left: 50%;
//         right: 400px;
//         width: 428px;
//         height: 38px;
//         border-radius: 20px;
//         .el-input {
//           input {
//             border-radius: 20px 0px 0px 20px;
//           }
//         }
//         .el-input-group__append {
//           width: 50px;
//           font-size: 15px;
//           border-radius: 0px 20px 20px 0px;
//           padding: 0px 20px 0px 10px;
//         }
//       }
//     }
//     .head_logo {
//       margin: 16px 0px;
//       width: 135px;

//       .logo_link {
//         height: 36px;
//       }
//     }
//   }
// }

// 默认
.site_head_absolute {
  position: absolute;
  top: 0px;
  background: rgba(255, 255, 255, 0.14);

  .channel_nav {
    color: #ffff;
  }
  .search_input {
    border-color: transparent;
  }
}

.site_head_fixed {
  position: fixed;
  top: 0px;
  background: rgba(255, 255, 255, 0.95);
  .channel_nav {
    color: #111;
  }
  .search_input {
    border: 1px solid #ff5c38;
  }
}

.site_head {
  z-index: 10;

  .head_inner {
    margin: 0 auto;

    .site_channel {
      position: relative;
      float: left;
      display: block;

      .channel_nav {
        text-decoration: none;
      }
      a:hover {
        color: #ff5c38;
      }
    }

    .el-input {
      input {
        background-color: rgba(255, 255, 255, 0.5);
        border-color: transparent;
      }
      .el-input-group__append {
        color: #ffffff;
        background-color: #ff5c38;
        border: none;
      }
    }
  }
  .head_logo {
    position: relative;
    float: left;

    .logo_link {
      display: block;
    }
  }
}
</style>
